<template>
  <div class="main">
    <!-- 导航栏 -->
    <div class="menu">
      <div class="home-page">
        <router-link to="/" class="">首页</router-link>
      </div>
      <div class="menu-list">
        <router-link to="evaluation">开始使用</router-link>
        <router-link to="desc">关于</router-link>
        <router-link to="contact">联系我们</router-link>
      </div>

      <!-- 登录注册与已登录 -->
      <div class="login">
        <div class="haslogin btn" v-if="haslogin == false" @click="handleRouterLink('/userlogin')">
          登录 | 注册
        </div>
        <div class="loginin" v-else>
          <el-dropdown @command="handleLoginCommand">
            <span class="el-dropdown-link">
              <div class="login-dropdown">
                <div class="avater">
                  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="small">
                  </el-avatar>
                </div>
                <div class="nickname">
                  {{ username == null || username == "" ? email : username }}
                </div>
                <div><i class="el-icon-arrow-down el-icon--right"></i></div>
              </div>
            </span>
            <el-dropdown-menu slot="dropdown" class="dropdowm-menu">
              <el-dropdown-item command="personal">个人中心</el-dropdown-item>
              <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 首页，图片加介绍 -->
    <div class="body">
      <div class="body-desc">
        <div class="body-desc-title animista1">
          创新素质测评在线平台
        </div>
        <div class="body-desc-text">基于场景化测评与神经网络算法的评价模型</div>
        <div class="body-btn">
          <div class="btn-one btn" @click="handleRouterLink('/desc')">
            了解更多
          </div>
          <div class="btn-two" @click="handleRouterLink('/evaluation')">
            开始使用
          </div>
        </div>
      </div>
      <div class="img-bg">
        <el-image :src="imgsrc"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { loginout } from "./../api/user"

export default {
  name: "IndexPage",
  data: function () {
    return {
      imgsrc: require("./../../static/Mask_Group_1.png"),
      haslogin: false,
      username: "",
      email: "",
    };
  },
  mounted: function () {
    this.haslogin = this.$store.state.User.haslogin;
    if (this.haslogin == true) {
      this.username = this.$store.state.User.name;
      console.log('username', this.username)
      this.email = this.$store.state.User.email;
    }
  },
  methods: {
    handleRouterLink: function (dest) {
      this.$router.push({ path: dest });
    },
    handleLoginCommand: function (command) {
      if (command == "loginout") {
        this.$confirm("退出登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            loginout({})
              .then((res) => {
                this.$store.commit("User/LoginOut");
                this.$message({
                  type: "success",
                  message: "您已成功退出登录!",
                });
                this.haslogin = false;
              })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else if (command == "personal") {
        this.$router.push({ path: "/user" });
      }
    },
  },
};
</script>

<style scoped>
.main {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#7363fc, #5851ea);
}

.menu {
  display: flex;
  height: 80px;
  line-height: 80px;
  width: 100%;
}

a {
  color: #fff;
  font-size: 1.3em;
  padding: 10px 20px;
}

a:hover {
  border-bottom: #fff 3px solid;
}

.home-page {
  width: 30%;
}

.menu-list {
  width: 56%;
}

.login {
  box-sizing: border-box;
  /* width: 80px; */
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  background-color: white;
  border-radius: 20px;
  margin: auto 20px;
  font-weight: 600;
  padding: 0 20px;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.btn.ghost {
  background: transparent;
  border-color: #fff;
}

.img-bg {
  width: 80%;
  position: absolute;
  bottom: 0;
  left: 10%;
  pointer-events: none;
  z-index: 0;
}

.body-desc {
  width: 100%;
  position: absolute;
  text-align: center;
  z-index: 100;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.body-desc-title {
  color: #fff;
  font-size: 2.8em;
  padding-top: 60px;
  padding-bottom: 10px;
}

.body-desc-text {
  color: #fff;
  font-size: 1.3em;
  padding: 10px;
}

.body-btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  color: #fff;
}

.btn-one,
.btn-two {
  height: 26px;
  line-height: 26px;
}

.btn-one {
  padding: 5px 30px;
  background-color: #fff;
  color: #6b5ef7;
  border-radius: 18px;
  margin-right: 60px;
  cursor: pointer;
}

.btn-two {
  padding-top: 5px;
  padding-bottom: 3px;
  padding-left: 30px;
  padding-right: 30px;
  border-bottom: 2px solid #fff;
  margin-left: 20px;
  cursor: pointer;
}


.haslogin,
.nickname {
  color: #111;
}

.haslogin {
  color: #6b5ef7;
}

.haslogin:hover {
  color: #111;
}

.login-dropdown {
  display: flex;
  justify-content: space-between;
}

.loginin .avater {
  height: 100%;
  margin-top: 5px;
  margin-right: 5px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #111;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.dropdowm-menu {
  margin-top: -10px;
  width: 100px;
  text-align: center;
}

.animista1 {
  animation: scale-up-center 1.5s;
  -webkit-animation: scale-up-center 1.5s;
  /* Safari and Chrome */
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
</style>
